import { View } from "@tarojs/components";
import { ReactNode } from "react";
import Sticky from "../app/Sticky";

export default ({
  title,
  sticky,
  children,
  className,

  onClick,
}: {
  title?: ReactNode;
  children: ReactNode;
  className?: string;
  sticky?: "top" | "bottom";

  onClick?: () => void;
}) => {
  const HeaderNode = sticky ? Sticky : View;

  return (
    <View
      className={`relative bg-white p-4 shadow-black-1 rounded-xl ${className}`}
      onClick={onClick}
    >
      {title && (
        <HeaderNode
          className={`-mt-3 py-3 mb-2 border-b-1 border-line-light ${
            sticky && "bg-white"
          }`}
          position={sticky}
        >
          {title}
        </HeaderNode>
      )}

      {children}
    </View>
  );
};
